<template>
  <div style="display:flex; flex-flow: row wrap;">
    <HorizontalThermometer v-for="(htConfig, index) in htConfigs" v-bind:key="index" :config="htConfig"/>
  </div>
</template>
<script>
import HorizontalThermometer from './HorizontalThermometer'
export default {
  components: {
    HorizontalThermometer
  },
  data() {
    return {
      htConfigs: [{
        "unitName": "t",
        "title": "总产量",
        "colors": [
          "#00CF6F",    // Good 绿色
          "#FFC963",    // Normal 黄色
          "#E22425"     // Danger 红色
        ],
        "thresholds": [{
          "threshold": 1000,
          "alias": ""
        },{
          "threshold": 6000,
          "alias": ""
        }],
        "chart": {
          "top": 0,
          "left": 10,
          "bottom": 30,
          "right": 10
        },
        "width": 600,
        "height": 300
      },{
        "unitName": "t",
        "title": "水泥产量",
        "colors": [
          "#00CF6F",    // Good 绿色
          "#FFC963",    // Normal 黄色
          "#E22425"     // Danger 红色
        ],
        "thresholds": [{
          "threshold": 5000,
          "alias": ""
        },{
          "threshold": 6000,
          "alias": ""
        }],
        "chart": {
          "top": 0,
          "left": 10,
          "bottom": 30,
          "right": 10
        },
        "width": 500,
        "height": 300
      },{
        "unitName": "t",
        "title": "熟料产量",
        "colors": [
          "#00CF6F",    // Good 绿色
          "#FFC963",    // Normal 黄色
          "#E22425"     // Danger 红色
        ],
        "thresholds": [{
          "threshold": 5000,
          "alias": ""
        },{
          "threshold": 6000,
          "alias": ""
        }],
        "chart": {
          "top": 0,
          "left": 10,
          "bottom": 30,
          "right": 10
        },
        "width": 200,
        "height": 200
      },{
        "unitName": "t",
        "title": "煤磨产量",
        "colors": [
          "#00CF6F",    // Good 绿色
          "#FFC963",    // Normal 黄色
          "#E22425"     // Danger 红色
        ],
        "thresholds": [{
          "threshold": 5000,
          "alias": ""
        },{
          "threshold": 10000,
          "alias": ""
        }],
        "chart": {
          "top": 0,
          "left": 10,
          "bottom": 30,
          "right": 10
        }
      }]
    }
  }
}
</script>